<template>
  <el-dialog v-model="detailVisible" title="详情" width="860" custom-class="no-header-dialog">
    <div class="modal-route-detail">
      <div class="modal-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="系统名称"> {{ props.data.name }} </el-descriptions-item>
          <el-descriptions-item label="状态"> {{ props.data.status.verbose || "--" }} </el-descriptions-item>
          <el-descriptions-item label="厂商"> {{ props.data.producer || "--" }} </el-descriptions-item>
          <el-descriptions-item label="版本号"> {{ props.data.version_number || "--" }} </el-descriptions-item>
          <el-descriptions-item label="接入系统类型"> {{ props.data.type.verbose }} </el-descriptions-item>
          <el-descriptions-item label="主机地址"> {{ props.data.host }} </el-descriptions-item>
          <el-descriptions-item label="协议"> {{ props.data.protocol }} </el-descriptions-item>
          <el-descriptions-item label="端口号"> {{ props.data.port }} </el-descriptions-item>
          <el-descriptions-item label="用户名"> {{ props.data.username || "--" }} </el-descriptions-item>
          <!-- <el-descriptions-item label="密码"> {{ props.data.password || '--' }} </el-descriptions-item> -->
          <el-descriptions-item label="所属路线">
            {{ props.data.route ? props.data.route.name : "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="接入时间"> {{ props.data.create_at || "--" }} </el-descriptions-item>
          <el-descriptions-item label="操作人"> {{ props.data.updated_username || "--" }} </el-descriptions-item>
          <el-descriptions-item label="license到期日"> {{ props.data.lisense_end_time || "--" }} </el-descriptions-item>
          <el-descriptions-item label="代理字段" v-if="props.data.type.key === 'cloudOM'">
            {{ props.data.hw_proxy_info.http || "--" }} <br />
            {{ props.data.hw_proxy_info.https || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="ar地址" v-if="props.data.type.key === 'cloudBackup'">
            {{ props.data.ar_sso_path || "--" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <template #footer>
      <div class="modal-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="detail">
import { ref } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: false,
    default: () => ({})
  }
});
const detailVisible = ref<boolean>(false);
const openDialog = () => {
  detailVisible.value = true;
};
const closeDialog = () => {
  detailVisible.value = false;
};
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style lang="scss" scoped>
:deep(.ant-descriptions-item-content) {
  display: table-cell;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: rgb(0 0 0 / 65%);
}
:deep(.ant-descriptions-item-label) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
:deep(.ant-tabs-bar) {
  margin: 0 0 20px;
}
:deep(.ant-tabs-nav .ant-tabs-tab) {
  font-size: 16px;
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 24px;
}
.card-span {
  margin: 10px;
  .label {
    display: inline-block;
    width: 120px;
    margin-right: 10px;
  }
  .itemText {
    display: inline-block;
  }
}
</style>
